<script setup>
import {ref} from "vue";
import {CategoryGetService, bookCategoryService} from "@/js/api/index"
import {useTokenStore} from "@/js/util/token";
import router from "@/router";
import {ElMessage} from "element-plus";
//图书信息数据模型
const books = ref([
  {
    "bookId": 1,
    "type": "世界名著",
    "bookName": "红与黑",
    "author":"",
    "price":1,
    "truePrice":1,
    "publisher":"",
    "publishTime":"",
    "quantity":1,
    "description":"",
    "pictureBig":"",
    "pictureSmall":""
  }
])
//保存图书种类的数据
const BookCategory = ref([])
//得到图书种类的函数
const getCategory = async () => {
  if(useTokenStore().token){
    let result = await CategoryGetService()
    BookCategory.value = result.data.data
    //处理数据，取出第一个图书种类
    let firstType
    for(let i = 0; i < 1; i++){
      firstType = BookCategory.value[i]
    }
    await bookList(firstType)
  }
}
//得到某一种类的全部图书
const bookList = async (category) => {
  let result = await bookCategoryService(category);
  books.value = result.data.data;
}
//跳转详情页
const toDescription = (bookId) => {
  useItIdStore().setItId(bookId)
  if(useTokenStore().token){
    router.push("/description")
  }else{
    ElMessage.warning("请先登录!_!")
  }
}
//自动调用函数
getCategory()
const firstCategory = ref("")
nowPage = firstCategory.value
</script>

<template>
<!--  分类页面-->
<el-container style="height: 100%; min-height: 100%; width: 100%">
<!--  侧边栏-->
  <el-aside style="width: 200px">
    <el-menu default-active="0" @select="bookList(category)">
      <el-menu-item
          v-for="(category, key, index) in BookCategory"
          :key="key"
          :value="category"
          :index="index=key.toString()"
          @click="bookList(category)"
          default-active="index"
      ><span>{{category}}</span></el-menu-item>
    </el-menu>
  </el-aside>
<!--  商品展示区-->
  <el-main>
    <el-row>
      <el-col
          v-for="(book, key, index) in books"
          :key="key"
          :index="index"
          :value="book"
          :span="5"
          :offset="1"
      >
        <el-card :body-style="{ padding: '0px' }">
          <div style="width: 100%;min-width: 100%">
            <img :src="book.pictureBig"
                 class="image"
                 referrerpolicy="no-referrer"
            />
          </div>
          <div style="padding: 14px; flex: 1; display: flex;flex-flow: column">
            <div style="width: 100%;display: flex;justify-content: center;height: 50%;min-height: 50%">
              <span style="font-weight: bold;">{{ book.bookName }}</span>
            </div>
            <div class="bottom">
              <time class="time">{{ book.publisher }}</time>
              <el-button text class="button" @click="toDescription(book.bookId)"><el-icon><DArrowRight /></el-icon></el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </el-main>
</el-container>
</template>

<style>
.el-card__body{
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-flow: column
}
.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 10px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>